<template>
	<div class="public_main">
		<div class="crumbs">
      <el-breadcrumb separator="/">
				<template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no20')}}</el-breadcrumb-item>
        	<el-breadcrumb-item>{{$t('dashBoard.no8')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('flowOfCreditConfig.no1')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

		<!-- 添加流程 -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

		<!-- 信审流程配置 -->
		<div class="pos">
			<!-- <el-button size="small" v-if="!auditFlag" type="primary" class="pos-right" @click="changeAudit">{{$t('public.no51')}}</el-button> -->
			<!-- <el-button size="small" v-else type="primary" class="pos-right" @click="changeAuditSure">{{$t('public.no49')}}</el-button> -->
			<h3 class="mb20 blue" >{{$t('flowOfCreditConfig.no5')}}</h3>
			<!-- <section class="flex flex-align-center mb20">
				<div class="progess">{{$t('flowOfCreditConfig.no7')}}</div>
				<span> -------→ </span>
				<div class="progess">{{$t('flowOfCreditConfig.no8')}}</div>

				<div v-for="(item,i) in processConfigCreditCheckList" :key="i" class="flex flex-align-center">
					<span> -------→ </span>
					<div class="progess pos pd6">
						{{item.name}}
						<span v-if="auditFlag" class="close" @click="deleteAudit(item.processCode)">X</span>
					</div>
				</div>

				<template v-if="auditFlag">
					<span> -------→ </span>
					<div class="progess" >
						<el-select size="small" v-model="auditConfig" :placeholder="$t('public.placeholder')">
							<el-option v-for="item in options1" :key="item.value" :label="$t(item.label)" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</template>
				
			</section> -->

			<section class="mb20">	
				<span class="mr20">{{$t('riskManage.auditTotal_options.no1')}}</span>
				<el-switch
					style="font-size:'18px'"
					v-model="firstReview"
					@change="auditChange('1')"
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-text="开"
					inactive-text="关"
					:active-value="1"
          :inactive-value="0">
				</el-switch>
				<span class="ml20">{{$t('long.no6')}}</span>
			</section>
			<section class="mb30">	
				<span class="mr20">{{$t('riskManage.auditTotal_options.no2')}}</span>
				<el-switch
					style="font-size:'18px'"
					v-model="secondReview"
					@change="auditChange('2')"
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-text="开"
					inactive-text="关"
					:active-value="1"
            :inactive-value="0">
				</el-switch>
				<span class="ml20">{{$t('long.no7')}}</span>
			</section>
		</div>
		

		<!-- 信审流程配置 -->
		<div class="pos">
			<el-button size="small" v-if="!submenuFlag" type="primary" class="pos-right" @click="changeSubmenu">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeSubmenuSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('flowOfCreditConfig.no6')}}</h3>
			<el-form ref="addForm" :model="form"  size="small" >
				<el-form-item :label="$t('flowOfCreditConfig.no9')">
					<el-radio-group v-model="form.type" >
						<el-radio :label="1" disabled>{{$t('flowOfCreditConfig.no10')}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item :label="$t('flowOfCreditConfig.no11')" prop="id">
						<el-input v-model="form.orderClaimCount" style="width:80px" :disabled="!submenuFlag"></el-input><span>{{$t('flowOfCreditConfig.no12')}}</span>
					</el-form-item>
			</el-form>
			
				
			
		</div>
		
	</div>
</template>

<script>
export default {
	name: 'auditProcess',
  data () {
    return {
			from: '',
			auditConfig: '',
			partnerId: '',
			partnerNo: '',
			partnerName: '',
			auditFlag: false,
			submenuFlag: false,
			processConfigCreditCheckList: [],
			form: {
				type: 1,
				orderClaimCount: ''
			},
			firstReview: '',
			secondReview: '',
			reviewObj:{

			}
    }
  },
  methods: {
		changeAudit(){
			this.auditFlag = true
		},
		changeAuditSure(){
			if(this.auditConfig){
				this.processConfigCreditCheckList.push({
					name:this.auditConfig
				})
			}
			this.auditFlag = false
		},
		changeSubmenu(){
			this.submenuFlag = true
		},
		changeSubmenuSure(){
			let options = {
				
        param: {
					partnerId: this.partnerId,
					partnerNo: this.partnerNo,
          orderClaimCount: this.form.orderClaimCount
        }
      }
      this.$axios.post(this.$action.credit_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
        }
        this.submenuFlag = false
      })
			
		},
		deleteAudit(id){
			let options = {
        param: {
          partnerId:this.partnerId,
          id
        }
      }
      this.$axios.post(this.$action.credit_delete, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
        }
        this.getDetailData()
      })
			
		},
		getDetailData(){
      let option = {
				param:{
					partnerId: this.partnerId,
				}
      }
      this.$axios.post(this.$action.credit_pageinfo, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName
					this.partnerNo = res.data.partnerNo
					this.reviewObj.first = res.data.manualFirstReview
					this.reviewObj.second = res.data.manualSecondReview
          this.firstReview = res.data.manualFirstReview?res.data.manualFirstReview.status:0
					this.secondReview = res.data.manualSecondReview?res.data.manualSecondReview.status:0
					this.form.orderClaimCount = res.data.orderClaimCount
				} else {
          this.$globalMsg.error(res.message)
        }
				this.submenuFlag = false
      })
		},
		auditChange(str){
			let options = {
        param: {
					partnerId:this.partnerId, 
				}
			}
			if(str==1){
				options.param.manualFirstReview = { status: this.firstReview, process: 3, id: this.reviewObj.first.id?this.reviewObj.first.id:'' }
				options.param.manualSecondReview = { status: this.secondReview, process: 4, id: this.reviewObj.second.id?this.reviewObj.second.id:'' }
      }
			if(str==2){
				options.param.manualFirstReview = { status: this.firstReview, process: 3, id: this.reviewObj.first.id?this.reviewObj.first.id:'' }
				options.param.manualSecondReview = { status: this.secondReview, process: 4, id: this.reviewObj.second.id?this.reviewObj.second.id:'' }
			}
			this.$axios.post(this.$action.credit_modification, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        } else {
          this.$globalMsg.error(res.message)
        }
      })
		}
  },
  mounted () {
		this.partnerId = this.$route.query.id
		this.from = this.$route.query.from
		this.getDetailData()
		
  }
}
</script>

<style scoped lang="scss">
.progess{
	width: 180px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	background-color: #ffffff;
	box-shadow:0px 2px 16px 0px rgba(140,143,163,0.13);
}
.close{
	position: absolute;
	display: block;
	width: 24px;
	height: 24px;
	background-color: deepskyblue;
	text-align: center;
	line-height: 24px;
	font-size: 22px;
	color: #fff;
	top: 0;
	right: 0;
}
.pos-right{
	position: absolute;
	right: 10px;
	top: 6px;
}
.pd6{
	padding: 0 6px;
}
</style>